<template>
	<view class="cash-list-container">
		<!-- 提现记录列表 -->
		<scroll-view 
			scroll-y 
			class="cash-list"
			@scrolltolower="handleLoadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="list-wrapper">
				<!-- 无数据展示 -->
				<view v-if="cashList.length === 0 && !loading" class="empty-box">
					<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
					<text class="empty-text">暂无提现记录</text>
				</view>
				
				<!-- 记录列表 -->
				<template v-else>
					<view class="cash-item" v-for="(item, index) in cashList" :key="index">
						<view class="cash-info">
							<view class="cash-amount">¥{{item.cash_amount}}</view>
							<view class="cash-status" :class="getStatusClass(item.cash_status)">
								{{item.cash_status_string}}
							</view>
						</view>
						<view class="cash-detail">
							<view class="detail-item">
								<text class="label">提现单号：</text>
								<text class="value">{{item.cash_no}}</text>
							</view>
							<view class="detail-item">
								<text class="label">申请时间：</text>
								<text class="value">{{item.created_at}}</text>
							</view>
							<view class="detail-item" v-if="item.after_balance">
								<text class="label">余额：</text>
								<text class="value">¥{{item.after_balance}}</text>
							</view>
							<view class="detail-item" v-if="item.pay_at">
								<text class="label">到账时间：</text>
								<text class="value">{{item.pay_at}}</text>
							</view>
							<!-- <view class="detail-item" v-if="item.admin_result">
								<text class="label">备注：</text>
								<text class="value">{{item.admin_result}}</text>
							</view> -->
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-more" v-if="loading">
						<view class="loading-icon"></view>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 无更多数据 -->
					<view v-if="!hasMore && cashList.length > 0" class="no-more">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/utils/request'

	export default {
		data() {
			return {
			cashList: [],
			page: 1,
			hasMore: true,
			loading: false,
			isRefreshing: false
			}
		},
	onShow() {
		this.getCashList()
	},
	// 上拉加载
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getCashList()
		}
	},
	methods: {
		// 获取提现记录
		async getCashList() {
			if (this.loading) return
			this.loading = true
			
			try {
				const res = await request({
					url: '/wechat/cash/lists',
					data: { page: this.page }
				})
				
				if (res.code === 0 && res.data) {
					if (this.page === 1) {
						this.cashList = res.data.data
					} else {
						this.cashList = [...this.cashList, ...res.data.data]
					}
					this.hasMore = !!res.data.next_page_url
				}
			} catch (err) {
				console.error('获取提现记录失败', err)
			} finally {
				this.loading = false
			}
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			const statusMap = {
				1: 'status-pending',    // 待审核
				2: 'status-process',    // 提现中
				3: 'status-success',    // 成功
				4: 'status-reject',     // 驳回
				9: 'status-fail'        // 失败
			}
			return statusMap[status] || 'status-pending'
		},
		
		// 下拉刷新
		onRefresh() {
			this.isRefreshing = true
			this.page = 1
			this.cashList = []
			this.hasMore = true
			
			this.getCashList()
			setTimeout(() => {
				this.isRefreshing = false
			}, 1000)
		},
		
		// 添加处理加载更多的方法
		handleLoadMore() {
			if (this.hasMore) {
				this.page++
				this.getCashList()
			}
		}
		}
	}
</script>

<style>
.cash-list-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f6f7fb;
}

.cash-list {
	flex: 1;
	height: 100vh;
}

.list-wrapper {
	padding: 20rpx;
}

.cash-item {
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
}

.cash-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.cash-amount {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
}

.cash-status {
	font-size: 26rpx;
	font-weight: 500;
}

.status-pending {
	color: #ff9900;
}

.status-process {
	color: #007AFF;
}

.status-success {
	color: #07c160;
}

.status-reject, .status-fail {
	color: #ff4d4f;
}

.cash-detail {
	padding-top: 20rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 26rpx;
	color: #666;
}

.value {
	font-size: 26rpx;
	color: #333;
}

.loading-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.loading-icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 4rpx solid #ddd;
	border-top-color: #007AFF;
	margin-right: 10rpx;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	color: #666;
}

.no-more {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 24rpx;
}

.no-more-text {
	color: #666;
}

.empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>
